<template>
  <div class="search-container">
    <el-card class="box-card">
      <div class="title">{{ title }}</div>
      <el-form :inline="true" :model="searchForm" :size="size">
        <el-form-item :label="item.label" v-for="(item, index) in source" :key="index">
          <!-- 输入框 -->
          <template v-if="item.type === 'input'">
            <el-input
              clearable
              :placeholder="item.placeholder || '请输入内容'"
              v-model="searchForm[item.data]"
              v-bind="item.otherOptions"
              v-on="onEvents(item.events)"
            >
            </el-input>
          </template>
          <!-- 选择器 -->
          <template v-else-if="item.type === 'select'">
            <el-select
              clearable
              :placeholder="item.placeholder || '请选择'"
              v-model="searchForm[item.data]"
              v-bind="item.otherOptions"
              v-on="onEvents(item.events)"
            >
              <el-option
                v-for="(option, idx) in item.options"
                :key="idx"
                :label="item.extendKey ? option[item.extendKey.label] : option.label"
                :value="item.extendKey ? option[item.extendKey.value] : option.value"
              >
              </el-option>
            </el-select>
          </template>
          <!-- 级联选择器 -->
          <template v-else-if="item.type === 'cascader'">
            <el-cascader v-model="searchForm[item.data]" :options="item.options" :props="item.props"></el-cascader>
          </template>
          <!-- 日期 -->
          <template v-else-if="item.type === 'datepicker'">
            <el-date-picker
              clearable
              :placeholder="item.placeholder || '请选择'"
              v-model="searchForm[item.data]"
              v-bind="item.otherOptions"
              @change="datePickerChange(item)"
              :value-format="item.otherOptions.valueFormat || 'yyyy-MM-dd'"
              :range-separator="item.otherOptions.rangeSeparator || '至'"
              :start-placeholder="item.otherOptions.startPlaceholder || '开始日期'"
              :end-placeholder="item.otherOptions.endPlaceholder || '结束日期'"
            />
          </template>
          <!-- 地址 -->
          <template v-else-if="item.type === 'address'"></template>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button @click="handleRest">重置</el-button>
          <!-- 高级搜索 -->
          <template v-if="formItems.length > inlineLength">
            <el-button class="senior-search" @click="showSeniorSearch = !showSeniorSearch">
              {{ showSeniorSearch ? '收起' : '高级搜索' }}
            </el-button>
          </template>
          <slot name="action" :row="searchForm"></slot>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'XlSearch',
  props: {
    title: {
      type: String,
      default: ''
    },
    // 搜索条件
    formItems: {
      type: Array,
      default: () => []
    },
    // 表单大小
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      searchForm: {}, // 表单数据
      inlineLength: 3, // 一行显示多少个搜索条件
      showSeniorSearch: false, // 显示高级搜索
      cacheDate: [] // 不需要的时间键
    }
  },
  computed: {
    source() {
      if (this.formItems.length > this.inlineLength && !this.showSeniorSearch) {
        return this.formItems.slice(0, this.inlineLength)
      }
      return this.formItems
    }
  },
  methods: {
    onEvents() {},
    // 选择时间触发
    datePickerChange({ data, format, otherOptions }) {
      format = format ? format : []

      const date = this.searchForm[data]
      const start = data + (format[0] || 'BeginDate')
      const end = data + (format[1] || 'EndDate')
      // 如果清空时间
      if (!date || date.length <= 0) {
        delete this.searchForm[start]
        delete this.searchForm[end]
        return
      }
      // 如果时间选择器没有时分秒选择
      if (otherOptions.type !== 'datetimerange') {
        this.searchForm[start] = date[0]
        this.searchForm[end] = date[1].split(' ')[0] + ' 23:59:59'
      } else {
        this.searchForm[start] = date[0]
        this.searchForm[end] = date[1]
      }
      // 搜索时需要删除该日期键
      if (!this.cacheDate.includes(data)) {
        this.cacheDate.push(data)
      }
    },
    // 搜索
    handleSearch() {
      // 深拷贝
      let params = JSON.parse(JSON.stringify(this.searchForm))
      params = this.deleteSearchFormNullKey(params)
      this.cacheDate.forEach((key) => delete params[key])
      this.$emit('search', params)
    },
    // 清空
    handleRest() {
      this.searchForm = {}
      this.handleSearch()
    },
    // 删除为空的参数
    deleteSearchFormNullKey(params) {
      Object.keys(params).map((key) => {
        const value = params[key]
        if (value === '' || value === null || value === undefined) {
          delete params[key]
        }
      })
      return params
    }
  }
}
</script>

<style lang="scss" scoped></style>
